<template>
	<div class="design-menu" v-if="config.show" :style="{ top: `${config.top}px`, left: `${config.left}px` }">
		<div class="design-menu-item" @click="handleMenu('delete')">
			<span>删除</span>
		</div>
		<div class="design-menu-item" @click="handleMenu('group')">
			<span>{{complex.name === "tool-combination"?"解散":"组合"}}</span>
		</div>
		<div class="design-menu-item" @click="handleMenu('copy')">
			<span>复制</span>
		</div>
		<div class="design-menu-line" />
		<div class="design-menu-item" @click="handleMenu('lock')">
			<span>{{ complex.lock ? "解锁" : "锁定" }}</span>
		</div>
		<div class="design-menu-item" @click="handleMenu('hidden')">
			<span>{{ complex.hidden ? "取消隐藏" : "隐藏" }}</span>
		</div>
		<div class="design-menu-item" @click="handleMenu('flex')">
			<span>{{ complex.flex ? "取消固定定位" : "固定定位" }}</span>
		</div>
		<div class="design-menu-line" />
		<div class="design-menu-item" @click="handleMenu('up')">
			<span>向上一层</span>
		</div>
		<div class="design-menu-item" @click="handleMenu('down')">
			<span>向下一层</span>
		</div>
		<div class="design-menu-line" />
		<div class="design-menu-item">
			<span>添加自定义组件</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
			},
		},
		computed: {
			complex() {
				return this.$store.state.design.selectComplex;
			}
		},
		methods: {
			handleMenu(type) {
				if (type === 'delete') {
					// console.log('删除')
					this.$store.dispatch('design/deleComplex', {
						id: this.complex.id
					})
				}

				if (type === 'copy') {
					// console.log('复制')
					this.$store.dispatch('design/copyComplex', this.complex)
				}

				if (type === 'lock') {
					// console.log('锁定/解锁')
					this.complex.lock = !this.complex.lock
					this.$store.dispatch('design/updateComplex', this.complex)
				}


				if (type === 'hidden') {
					// console.log('隐藏')
					this.complex.hidden = !this.complex.hidden
					this.$store.dispatch('design/updateComplex', this.complex)
				}

				if (type === 'flex') {
					// console.log('固定定位')
					this.complex.flex = !this.complex.flex
					this.$store.dispatch('design/updateComplex', this.complex)
				}

				if (type === 'up') {
					// console.log('向上一层')
					this.complex.z = ++this.complex.z;
					this.$store.dispatch('design/updateComplex', this.complex)
				}

				if (type === 'down') {
					// console.log('向下一层')
					this.complex.z = --this.complex.z;
					this.$store.dispatch('design/updateComplex', this.complex)
				}

				if (type === 'group') {
					// 合并组件时；先获取组件列表中全部选中的组件
					if (this.complex.name === 'tool-combination') {
						console.log('解散')
						this.splitSource(this.complex)	
					} else {
						console.log('组合')
						const list = JSON.parse(JSON.stringify(this.$parent.complexList));
						const groupComplexs = list.filter(item => item.focused)
						this.groupSource(groupComplexs)
					}
				}

				// 关闭右键菜单
				this.$store.dispatch('design/settingMenu', {
					show: false,
					top: 0,
					left: 0
				})
			},
			// 解散组件
			splitSource(complex) {
				// 拆分元素,获取组合元素的坐标值
				const childs = complex.config.childs;
				let startX = complex.x;
				let startY = complex.y;
				// 删除组合元素
				this.$store.dispatch('design/deleComplex', {
					id: this.complex.id
				})
				childs.forEach((item) => {
					// 计算组合后每个元素的新的 x、y 坐标并删除原组件
					item.x = item.x + startX;
					item.y = item.y + startY;
					item.id = new Date().valueOf(); // 元素ID
					this.$store.dispatch('design/addComplex', item)
				});
			},
			// 组件组合
			groupSource(childs) {
				let offsetXy = [];
				childs.forEach((item) => {
					// console.log(item)
					const offsetPostion = {
						x1: item.x,
						x2: item.x + item.w,
						y1: item.y,
						y2: item.y + item.h,
						width: item.w,
						height: item.h,
					};
					offsetXy.push(offsetPostion);
				});
				let maxX = Math.max.apply(
					Math,
					offsetXy.map(function(e) {
						return e.x2;
					})
				);
				let maxY = Math.max.apply(
					Math,
					offsetXy.map(function(e) {
						return e.y2;
					})
				);
				let minX = Math.min.apply(
					Math,
					offsetXy.map(function(e) {
						return e.x1;
					})
				);
				let minY = Math.min.apply(
					Math,
					offsetXy.map(function(e) {
						return e.y1;
					})
				);
				childs.forEach((item) => {
					// 计算组合后每个元素的新的 top、left 并删除原组件
					item.x = item.x - minX;
					item.y = item.y - minY;
					this.$store.dispatch('design/deleComplex', {
						id: item.id
					})
				});
				let width = maxX - minX;
				let height = maxY - minY;

				// 创建新的组合元素;
				const nodes = {
					id: new Date().valueOf(),
					version: '0.0.1',
					count: 1,
					name: "tool-combination",
					title: "组合",
					lock: false, // 锁定
					hidden: false, // 隐藏
					flex: false, // 固定定位
					focused: false, // 是否选中
					resizable: false, // 是否可以调整大小
					w: width,
					h: height,
					x: minX,
					y: minY,
					z: 50,
					r: 0, // 旋转角度
					opacity: 1, // 透明度
					config: {
						label: '组合',
						childs: childs,
					}, // 组件属性
				};
				console.log(nodes)
				this.$store.dispatch('design/addComplex', nodes)
				// this.clearSelectDom();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.design-menu {
		position: absolute;
		top: 0px;
		left: 0px;
		padding: 4px 0px;
		min-width: 200px;
		min-height: 100px;
		transform: translateY(-50%);
		background: #2a2e33;
		box-shadow: rgb(0 0 0 / 30%) 0px 2px 8px;
		border-radius: 4px;
		color: rgb(242, 244, 245);
		border: 1px solid rgb(69, 70, 71);
		cursor: pointer;
		z-index: 2077;
	}

	.design-menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 24px;
	}

	.design-menu-line {
		margin: 4px 0px;
		border-top: 1px solid rgb(69, 69, 70);
	}

	.design-menu-item span {
		font-size: 12px;
		padding-left: 16px;
		padding-right: 14px;
	}

	.design-menu-item:hover {
		color: #409eff;
		background: #2f353bb5;
	}
</style>
